function _slicedToArray(arr, i) {
  return (
    _arrayWithHoles(arr) ||
    _iterableToArrayLimit(arr, i) ||
    _unsupportedIterableToArray(arr, i) ||
    _nonIterableRest()
  );
}
function _nonIterableRest() {
  throw new TypeError(
    'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
  );
}
function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === 'string') return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === 'Object' && o.constructor) n = o.constructor.name;
  if (n === 'Map' || n === 'Set') return Array.from(o);
  if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
    return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
  return arr2;
}
function _iterableToArrayLimit(arr, i) {
  var _i =
    null == arr
      ? null
      : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
  if (null != _i) {
    var _s,
      _e,
      _x,
      _r,
      _arr = [],
      _n = !0,
      _d = !1;
    try {
      if (((_x = (_i = _i.call(arr)).next), 0 === i)) {
        if (Object(_i) !== _i) return;
        _n = !1;
      } else
        for (
          ;
          !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i);
          _n = !0
        );
    } catch (err) {
      (_d = !0), (_e = err);
    } finally {
      try {
        if (!_n && null != _i.return && ((_r = _i.return()), Object(_r) !== _r)) return;
      } finally {
        if (_d) throw _e;
      }
    }
    return _arr;
  }
}
function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
import './index.less';
var px2Num = function px2Num(px) {
  return Number(px.replace('px', ''));
};
/**
 * 大屏适配器
 * 介于 useSize 内部依赖 ResizeObsever，不好编写测试用例，改用 getComputedStyle 及 resize 事件
 * @param props
 * @returns
 */
var Adapter = function Adapter(props) {
  var _props$width = props.width,
    width = _props$width === void 0 ? 1920 : _props$width,
    _props$height = props.height,
    height = _props$height === void 0 ? 1080 : _props$height,
    children = props.children;
  var adapterRef = useRef(null);
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    scale = _useState2[0],
    setScale = _useState2[1];
  var adjust = useCallback(
    function () {
      if (adapterRef.current) {
        var style = window.getComputedStyle(adapterRef.current);
        var adapterWidth = px2Num(style.width);
        var adapterHeight = px2Num(style.height);
        var ratio = width / height;
        if (adapterWidth && adapterHeight) {
          if (adapterWidth / adapterHeight > ratio) {
            setScale(adapterHeight / height);
          } else {
            setScale(adapterWidth / width);
          }
        }
      }
    },
    [width, height],
  );
  useLayoutEffect(
    function () {
      window.addEventListener('resize', adjust);
      return function () {
        window.removeEventListener('resize', adjust);
      };
    },
    [adjust],
  );
  useLayoutEffect(
    function () {
      adjust();
    },
    [adjust],
  );
  return /*#__PURE__*/ React.createElement(
    'div',
    {
      className: 'szzj-adapter',
      'data-testid': 'szzj-adapter',
      ref: adapterRef,
    },
    scale !== 0 &&
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'szzj-adapter-canvas',
          'data-testid': 'szzj-adapter-canvas',
          // toHaveStyle 方法依赖于 getComputedStyle，注入 data-style 进行测试
          'data-style': JSON.stringify({
            transform: 'scale('.concat(scale, ')'),
            width: width,
            height: height,
          }),
          style: {
            transform: 'scale('.concat(scale, ')'),
            width: width,
            height: height,
          },
        },
        /*#__PURE__*/ React.cloneElement(children, {
          scale: scale,
        }),
      ),
  );
};
export default Adapter;
